<template>
  <div class="table-container">
    <el-table
      :data="orderList"
      height="460"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <template slot="empty">
        <p>{{ dataText }}</p>
      </template>
      <!-- <el-table-column type="selection" />
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="id">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="订单编号">
              <span>{{ props.row.orderNum }}</span>
            </el-form-item>
            <el-form-item label="订单状态">
              <span>{{ props.row.status }}</span>
            </el-form-item>
            <el-form-item label="购买单价">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="购买数量">
              <span>{{ props.row.num }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column> -->
      <el-table-column prop="id" label="id" sortable />
      <el-table-column prop="status" label="订单状态" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.status| formartStatus }}</template>
      </el-table-column>
      <el-table-column prop="price" label="购买单价" />
      <el-table-column prop="num" label="购买数量" />
      <el-table-column prop="createTime" label="创建时间" sortable />
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="toDetail(scope.$index, scope.row)">详情</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page.sync="getOrderForm.current"
        :page-size="getOrderForm.size"
        layout="prev, pager, next, jumper"
        :total="getOrderForm.total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { getOrderList } from '@/utils/order.js'

export default {
  name: 'OrderIndex',
  data() {
    return {
      orderList: [],
      hasData: false,
      dataText: '',
      // 被选中的订单数组,有handleSelectionChange处理
      selectionOrdersId: [],
      // dialog的显示消失控制
      dialogTableVisible: true,
      // 整个dialog的form表单都不能修改
      dialogFormDisable: true,
      dialogOrderForm: null,
      getOrderForm: {
        current: 1,
        size: 20,
        total: 0,
        pages: 0
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getOrderList(this.getOrderForm).then((res) => {
        // console.log(res)
        if (res.object.records && res.object.length > 0) {
          this.hasData = true
        } else {
          // this.$message('暂无订单数据')
          this.dataText = '暂无数据'
        }
        this.orderList = res.object.records
        this.getOrderForm.total = res.object.total
        this.getOrderForm.size = res.object.size
        this.getOrderForm.pages = res.object.pages
      })
    },

    handleCurrentChange(val) {
      this.getList()
    },
    // 前往订单详情页面
    toDetail(index, obj) {
      this.$router.push(`/order/detail/${obj.id}`)
    }
  }
}
</script>
<style>
/* .el-table__expanded-cell */
.el-table .el-table__row td,
.el-table th {
  text-align: center !important;
}
</style>
<style scoped lang="scss">
.order-container {
  margin: 20px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.block {
  margin-top: 20px;
  text-align: center;
}
</style>
